<template>
    <div class="tout-index">
        <div class="all-content">
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive"/>>
                </keep-alive>
                <router-view v-if="!$route.meta.keepAlive"/>
            
        </div>
        <!-- tabbar -->
        <nav class="mui-bar mui-bar-tab">
			<router-link class="my-tab-item" to="/idssp/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link> 
            <!-- <router-link class="my-tab-item" to="/search">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</router-link> -->
			<router-link class="my-tab-item" to="/idssp/shopcar">
                <!-- badge徽标 -->
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge" id="badge">{{totalCount}}</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
            <router-link class="my-tab-item" to="/idssp/member">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</router-link>
		</nav>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
    name:'',
    components:{
       
    },
    data(){
        return {
           
       }
    },
    computed: {
        ...mapGetters(["totalCount"])
    },
    methods:{
       
    },
}
</script>
<style lang="scss" scoped>
.tout-index{
    .mui-bar{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }
    // 解决tabbar 区域 和 图片分类列表JS行为冲突的问题。（实际上就是当photolist可以实现滑块滑动后，但是又不能点击底部的菜单，切换界面的问题）
    // 原因：是因为mui里面的'mui-tab-item'与PhotoList.vue里面使用的mui产生冲突
    // 解决：在页面中把所有和'mui-tab-item'相关的样式找出来，复制粘贴到项目中，然后修改类名为'my-tab-item'，然后引用的时候也更改即可。
    .mui-bar-tab .my-tab-item.mui-active {
        color: #E25B45;
    }
    .mui-bar-tab .my-tab-item {
        display: table-cell;
        overflow: hidden;
        width: 1%;
        height: 50px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #929292;
    }
    .mui-bar-tab .my-tab-item .mui-icon {
        top: 3px;
        width: 24px;
        height: 24px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .mui-bar-tab .my-tab-item .mui-icon~.mui-tab-label {
        font-size: 11px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>